<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="./css/commes.css" />
		<link rel="stylesheet" href="./css/photoswipe.css">
		<link rel="stylesheet" href="./css/default-skin/default-skin.css">

		<link href="./css/mui.css" rel="stylesheet" />
		<script src="./js/mui.js"></script>
		<script src="./utils/myRequest.js"></script>

		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				var user = store.getItem();
				// document.getElementById("minImg").src = user.maxHeand;
				document.getElementById("nickname").innerText = user.nickname;
				document.getElementById("maxImg").src = user.maxHeand;

				request.ajax({
					url: "/websocket/t-article/getAll",
					data: {},
					type: "post",
					success: function(resp) {
						if (resp.code == 20000) {
							var lists = resp.data.list;

							// console.log(lists.length);

							for (var i = 0; i < lists.length; i++) {
								var html = "";
								html += "<div class=\"container\">\n";
								html += "<!--用户头像-->\n";
								html += "<div class=\"header\">\n";
								html += "<div class=\"goAddUser\" username=\"" + lists[i].tuser.username +
									"\"><img style=\"width: 50px;height: 50px;border-radius: 50%;\" src=\"" +
									lists[i].tuser.maxHeand + "\" /></div>\n";
								html += "</div>\n";
								html += "<div class=\"right_con\">\n";
								html += "<div class=\"demo\">\n";
								html += "<!--用户名and发布时间-->\n";
								html += "<div class=\"use\">\n";
								html += "<div class=\"usename\"><span style=\"font-size: 19px;\">" + lists[i]
									.tuser.nickname +
									"</span><em style=\"font-size: 16px;\" class=\"pub-time\">" + lists[i]
									.createTime.substring(0, 10) + "</em></div>\n";
								html += "</div>\n";
								html += "<!--分享的内容-->\n";
								html += "<p class=\"fx_content\" style=\"font-size: 16px;\">" + lists[i]
									.content + "</p>\n";
								html += "<!--分享的图片-->\n";
								html += "<div class=\"my-gallery\">\n";
								var img = lists[i].imgs;
								for (var j = 0; j < img.length; j++) {
									html += "<figure>\n";
									html += "<a href=\"" + img[j] + "\" data-size=\"800x1142\">\n";
									html += "<img src=\"" + img[j] + "\" />\n";
									html += "</a>\n";
									html += "</figure>\n";
								}
								html += "</div>\n";
								html += "</div>\n";
								html += "</div>\n";
								html += "</div>";

								// var py = document.getElementById("py_quan").innerHTML;
								// html += py + html;
								// document.getElementById("py_quan").innerHTML = html;

								//发送数据
								var hml = document.getElementById("py_quan").innerHTML;
								//数据追加
								document.getElementById("py_quan").innerHTML = hml + html;
							}


						}
					}
				});

				mui(".wondie").on('tap', '.goAddUser', function() {
					//获取id
					var username = this.getAttribute("username");
					// console.log(username);
					// plus.nativeUI.toast(username);
					mui.openWindow({
						url: 'friendAuth.html',
						id: 'friendAuth.html',
						extras: {
							name: username //自定义扩展参数，可以用来处理页面间传值
						}
					});
				});

			});
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">朋友圈</h1>
		</header>
		<div>

			<div style="position: relative;">
				<img id="minImg" src="./img/bj.jpg" style="width: 100%;opacity: 1;height: 300px;" />
				<div style="width: 300px;height: 100px;position: absolute;right: 0;bottom: 5px;text-align: right;">
					<div id="0" style="position: absolute;bottom: 0;right: 0;">
						<span style="color: white;" id="nickname">未进化的程序猿</span>
						<img src="img/tou.jpg" id="maxImg" style="width: 90px;border-radius: 10px;height: 90px;">
					</div>
				</div>
			</div>

			<div id="py_quan" class="wondie">
			</div>

			<!--以下内容不要管-->
			<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
				<div class="pswp__bg"></div>
				<div class="pswp__scroll-wrap">
					<div class="pswp__container">
						<div class="pswp__item"></div>
						<div class="pswp__item"></div>
						<div class="pswp__item"></div>
					</div>
					<div class="pswp__ui pswp__ui--hidden">
						<div class="pswp__top-bar">
							<div class="pswp__counter"></div>
							<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
							<div class="pswp__preloader">
								<div class="pswp__preloader__icn">
									<div class="pswp__preloader__cut">
										<div class="pswp__preloader__donut"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
							<div class="pswp__share-tooltip"></div>
						</div>
						<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
						<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
						<div class="pswp__caption">
							<div class="pswp__caption__center"></div>
						</div>
					</div>
				</div>
			</div>

		</div>

		<script src="./js/photoswipe.min.js"></script>
		<script src="./js/photoswipe-ui-default.min.js"></script>
		<script type="text/javascript">
			var initPhotoSwipeFromDOM = function(gallerySelector) {

				// parse slide data (url, title, size ...) from DOM elements 
				// (children of gallerySelector)
				var parseThumbnailElements = function(el) {
					var thumbElements = el.childNodes,
						numNodes = thumbElements.length,
						items = [],
						figureEl,
						linkEl,
						size,
						item;

					for (var i = 0; i < numNodes; i++) {

						figureEl = thumbElements[i]; // <figure> element

						// include only element nodes 
						if (figureEl.nodeType !== 1) {
							continue;
						}

						linkEl = figureEl.children[0]; // <a> element

						size = linkEl.getAttribute('data-size').split('x');

						// create slide object
						item = {
							src: linkEl.getAttribute('href'),
							w: parseInt(size[0], 10),
							h: parseInt(size[1], 10)
						};



						if (figureEl.children.length > 1) {
							// <figcaption> content
							item.title = figureEl.children[1].innerHTML;
						}

						if (linkEl.children.length > 0) {
							// <img> thumbnail element, retrieving thumbnail url
							item.msrc = linkEl.children[0].getAttribute('src');
						}

						item.el = figureEl; // save link to element for getThumbBoundsFn
						items.push(item);
					}

					return items;
				};

				// find nearest parent element
				var closest = function closest(el, fn) {
					return el && (fn(el) ? el : closest(el.parentNode, fn));
				};

				// triggers when user clicks on thumbnail
				var onThumbnailsClick = function(e) {
					e = e || window.event;
					e.preventDefault ? e.preventDefault() : e.returnValue = false;

					var eTarget = e.target || e.srcElement;

					// find root element of slide
					var clickedListItem = closest(eTarget, function(el) {
						return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
					});

					if (!clickedListItem) {
						return;
					}

					// find index of clicked item by looping through all child nodes
					// alternatively, you may define index via data- attribute
					var clickedGallery = clickedListItem.parentNode,
						childNodes = clickedListItem.parentNode.childNodes,
						numChildNodes = childNodes.length,
						nodeIndex = 0,
						index;

					for (var i = 0; i < numChildNodes; i++) {
						if (childNodes[i].nodeType !== 1) {
							continue;
						}

						if (childNodes[i] === clickedListItem) {
							index = nodeIndex;
							break;
						}
						nodeIndex++;
					}



					if (index >= 0) {
						// open PhotoSwipe if valid index found
						openPhotoSwipe(index, clickedGallery);
					}
					return false;
				};

				// parse picture index and gallery index from URL (#&pid=1&gid=2)
				var photoswipeParseHash = function() {
					var hash = window.location.hash.substring(1),
						params = {};

					if (hash.length < 5) {
						return params;
					}

					var vars = hash.split('&');
					for (var i = 0; i < vars.length; i++) {
						if (!vars[i]) {
							continue;
						}
						var pair = vars[i].split('=');
						if (pair.length < 2) {
							continue;
						}
						params[pair[0]] = pair[1];
					}

					if (params.gid) {
						params.gid = parseInt(params.gid, 10);
					}

					return params;
				};

				var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
					var pswpElement = document.querySelectorAll('.pswp')[0],
						gallery,
						options,
						items;

					items = parseThumbnailElements(galleryElement);

					// define options (if needed)
					options = {
						// define gallery index (for URL)
						galleryUID: galleryElement.getAttribute('data-pswp-uid'),
						getThumbBoundsFn: function(index) {
							// See Options -> getThumbBoundsFn section of documentation for more info
							var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
								pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
								rect = thumbnail.getBoundingClientRect();

							return {
								x: rect.left,
								y: rect.top + pageYScroll,
								w: rect.width
							};
						}

					};

					// PhotoSwipe opened from URL
					if (fromURL) {
						if (options.galleryPIDs) {
							// parse real index when custom PIDs are used 
							// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
							for (var j = 0; j < items.length; j++) {
								if (items[j].pid == index) {
									options.index = j;
									break;
								}
							}
						} else {
							// in URL indexes start from 1
							options.index = parseInt(index, 10) - 1;
						}
					} else {
						options.index = parseInt(index, 10);
					}

					// exit if index not found
					if (isNaN(options.index)) {
						return;
					}

					if (disableAnimation) {
						options.showAnimationDuration = 0;
					}

					// Pass data to PhotoSwipe and initialize it
					gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
					gallery.init();
				};

				// loop through all gallery elements and bind events
				var galleryElements = document.querySelectorAll(gallerySelector);

				for (var i = 0, l = galleryElements.length; i < l; i++) {
					galleryElements[i].setAttribute('data-pswp-uid', i + 1);
					galleryElements[i].onclick = onThumbnailsClick;
				}

				// Parse URL and open gallery if it contains #&pid=3&gid=1
				var hashData = photoswipeParseHash();
				if (hashData.pid && hashData.gid) {
					openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
				}
			};

			// execute above function
			initPhotoSwipeFromDOM('.my-gallery');
		</script>
	</body>
</html>
